<template>
  <div class="receipt-order-print" ref="receiptOrderPrintRef" hidden="hidden">
    <!-- <div class="title">{{ row.shipmentOrderNo }}</div> -->
    <div class="title">东莞隆氏科技有限公司</div>
    <!-- <div class="summary">
      <div class="col1">客戶: {{ row.customerName }}</div>
      <div class="col1">订单号: {{ row.orderNo }}</div>
      <div class="col1">出库类型: {{ row.shipmentType }}</div>
      <div class="col1">日期: {{ row.createTime }}</div>
    </div> -->
    <table class="common-table">
      <tr>
        <td style="width: 30%;">产品名称</td>
        <!-- <td align="center">铜柱</td> -->
        <td align="center" style="width: 40%;">{{ row.itemName || '' }}</td>
      </tr>
      <tr>
        <td style="width: 30%;">产品规格</td>
        <!-- <td align="center">1.2*3.5</td> -->
        <td align="center" style="width: 40%;">{{  row.productStandard || '' }}</td>
      </tr>
      <tr>
        <td style="width: 30%;">产品镀金</td>
        <!-- <td align="center">3U</td> -->
        <td align="center" style="width: 40%;">{{  row.productGilding || '' }}</td>
      </tr>
      <tr>
        <td style="width: 30%;">产品数量</td>
        <!-- <td align="center">100000</td> -->
        <td align="center" style="width: 40%;">{{  row.number || '' }}</td>
      </tr>
      <tr>
        <td style="width: 30%;">日期</td>
        <td align="center" style="width: 40%;">{{ this.formattedDate() }}</td>
        <!-- <td>{{  row.details.place || '' }}</td> -->
      </tr>
      <!-- <tr v-for="it in row.details">
        <td>{{ it.itemName || '' }}</td>
        <td>{{ it.itemNo || '' }}</td>
        <td>{{ it.itemType || '' }}</td>
        <td>{{ it.planQuantity }}</td>
        <td>{{ it.place }}</td>
      </tr> -->
      <!-- <tr>
        <td>合计</td>
        <td></td>
        <td></td>
        <td>{{ row.totalCount }}</td>
        <td></td>
      </tr> -->
    </table>
    <!-- <div class="foot">
      <div class="col2">备注: {{ row.remark }}</div>
    </div> -->
  </div>
</template>

<script>

export default {
  props: ['row'],
  methods: {
    start() {
      this.$print(this.$refs.receiptOrderPrintRef, {}, 'A4')
    },
    formattedDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;
      console.log(formattedDate);
      return formattedDate;
    }
  }
}
</script>

<style lang="stylus" media="print">
// portrait 纵向  landscape 横向
@page {
  size:  auto;
  margin: 5mm;
}

@media print {
  * {
    color: #000 !important;
  }

  table {
    width 100%
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0.05rem solid #000;
  }

  table, tbody, thead {
    width: 100% !important;
  }

  .receipt-order-print {
    width: 100% !important;
    font-size: 14px;
  }

  table, table tr th, table tr td {
    // border: 0.05rem solid #000;
    font-size: 12px;
    // font-weight:bold;
  }

}

.receipt-order-print
  // padding 12px
  // line-height:1.8;

  .summary
    display:flex;
    flex-wrap:wrap;

    .col1
      width:50%;

  .title
    width:100%;
    font-size:12px;
    text-align:center;
    margin-bottom:5px;

  .common-table
    td, th
      border-color:black;
</style>
